<template>
  <div id="home">
    <van-nav-bar title="头条移动端">
      <!-- fixed -->
      <template #right>
        <van-icon
          class="search-btn"
          name="search"
          @click="$router.push('/search')"
        />
      </template>
    </van-nav-bar>

    <van-tabs class="van-tabs-item" v-model="active" type="line" :border="true">
      <!-- sticky -->
      <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.division"
      >
        <ArtList :channel="channel"></ArtList>
      </van-tab>

      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="nav-wap" @click="show = true">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>

    <van-popup
      class="channel-edit"
      v-model="show"
      position="bottom"
      close-icon-position="top-left"
      closeable
      close-icon="close"
      get-container="body"
    >
      <ChannelEdit
        :userChannels="channels"
        :active="active"
        @closeChannelsList="show = false"
        @changeChannel="active = $event"
        @changeActive="active = $event"
      />
    </van-popup>
  </div>
</template>
<script>
import { getUserChannels } from '@/api/user'
import ArtList from './components/art-list'
import ChannelEdit from './components/channel-edit'
import { mapState } from 'vuex'
import { getStorage } from '@/utils/storage'
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      channels: [],
      show: false
    }
  },
  created () {
    this.loadChannels()
  },
  methods: {
    // 获取用户频道
    async loadChannels () {
      let userChannels = []
      // 是否登录
      if (this.token) {
        // 已登陆
        // 请求远程数据
        const { data } = await getUserChannels()
        userChannels = data.channels
      } else {
        // 未登录
        // 本地是否有频道数据
        const localChannels = getStorage('userChannels')
        if (localChannels) {
          // 有，则从本地拿
          userChannels = localChannels
        } else {
          // 没有则请求远程给默认
          const { data } = await getUserChannels()
          userChannels = data.channels
        }
      }
      this.channels = userChannels
    }
  },
  components: { ArtList, ChannelEdit },
  props: {},
  watch: {},
  computed: {
    ...mapState({
      token: 'token'
    })
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
#home {
  .placeholder {
    width: 26px;
    flex-shrink: 0;
  }
  /deep/.van-icon-search {
    background-color: #fff;
    border-radius: 50%;
    padding: 4px;
  }
  .van-tabs-item {
    /deep/ .van-tabs__line {
      background-color: #4fa7ff;
    }
  }

  .nav-wap {
    position: fixed;
    right: 0;
    height: 44px;
    width: 26px;
    line-height: 48px;
    background-color: #ffffff;
    opacity: 0.9;
    // &::before {
    //   content: '';
    //   width: 1px;
    //   height: 43px;
    //   background-image: linear-gradient(
    //     135deg,
    //     #ffffff 19%,
    //     #8bc6ec 39%,
    //     #9599e2 60%,
    //     #ffffff 80%
    //   );
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    // }
  }
}
</style>
